<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="850px"
      :before-close="closeDialog"
      append-to-body
      :title="configTitle"
  >
    <div class="configBody">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

        <el-tab-pane label="常规" name="first"  v-if="['process'].indexOf(type) === -1">
          <div class="configProBody">
            <nodeNormal ref="nodeNormal"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="接收人" name="second" v-if="['fork','join','disc','start','end','path','process'].indexOf(type) === -1">
          <div class="configProBody">
            <nodeApproval ref="nodeApproval"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="事件" name="third"  v-if="['fork','join','disc','path'].indexOf(type) === -1">
          <div class="configProBody">
            <processEvent ref="processEvent" :parentNode="node" :process="process"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="权限" name="fourth"  v-if="['fork','join','disc','start','end','path'].indexOf(type) === -1">
          <div class="configProBody">
            <authConfig ref="authConfig" :parentNode="node" :process="process"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="表单配置" name="five"  v-if="['fork','join','disc','path','process'].indexOf(type) === -1">
          <div class="configProBody">
            <formConfig ref="formConfig" :parentNode="node" :process="process"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="变量参数" name="six"  v-if="['fork','join','disc','path'].indexOf(type) === -1">
          <div class="configProBody">
            <VariableConfig ref="variableConfig" :parentNode="node" :process="process"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import NodeNormal from "./NodeNormal";
import NodeApproval from './approval/NodeApproval.vue';
import ProcessEvent from './event/ProcessEvent.vue';
import AuthConfig from './auth/AuthConfig.vue'
import FormConfig from './form/FormConfig.vue'
import VariableConfig from './variable/VariableConfig.vue'
import { utils } from '../utils/common.js'
export default {
  components: {
    NodeNormal,
    NodeApproval,
    ProcessEvent,
    AuthConfig,
    FormConfig,
    VariableConfig
  },
  data() {
    return {
      configTitle:"任务配置",
      activeName: 'first',
      labelPosition:'right',
      dialogVisible: false,
      loading: false,
      type:"",
      node:this.defaultNode(),
      process:this.defaultProcess(),
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    defaultProcess(){
      return {
        type:"process",
        eventConfigs:[],
        authConfigs:[],
        variableConfigs:[]
      };
    },
    defaultNode(){
      return {
        processId:"",
        nodeId:"",
        nodeType:"",
        nodeName:"",
        execForm:"",
        parentNodeId:"",
        forkRules:"",
        joinRules:"",
        discRules:"",
        desc:"",
        approveConfig:{
          configId:"",
          approveType:'ONLY',
          onlyApprove:"FIRST_ONE",
          moreApprove:"ALL",
          noUserApprove:"ERROR",
          sameLastApprove:"CONTINUE",
          conditionFlag:false,
          condition:"",
          userConfigList:[],
          conditionTrueUserConfigList:[],
          conditionFalseUserConfigList:[]
        },
        eventConfigs:[],
        authConfigs:[],
        formConfigs:[],
        variableConfigs:[]
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    showChangeTitle(row){
      let type = row.type;
      switch (type){
        case 'process':
          this.configTitle = "流程配置";
          break;
        case 'start':
          this.configTitle = "开始配置";
          break;
        case 'end':
          this.configTitle = "结束配置";
          break;
        case 'task':
        case 'auto':
        case 'wait':
          this.configTitle = "任务配置";
          break;
        case 'disc':
          this.configTitle = "路由配置";
          break;
        default:
              break;
      }
    },
    setDefaultRowValue(row){
      if(row.approveConfig == null){
        row.approveConfig = this.node.approveConfig;
      }
      if(row.eventConfigs == null){
        row.eventConfigs = this.node.eventConfigs;
      }
      if(row.authConfigs == null){
        row.authConfigs = this.node.authConfigs;
      }
      if(row.formConfigs == null){
        row.formConfigs = this.node.formConfigs;
      }
      if(row.variableConfigs == null){
        row.variableConfigs = this.node.variableConfigs;
      }
    },
    showDialog(row){
      this.type = row.type;
      this.showChangeTitle(row);
      this.setDefaultRowValue(row);
      if(row.type === 'process'){
        this.activeName = 'third';
        this.process = this.defaultProcess();
        let mergeNode = Object.assign(this.process,row);
        this.process = utils.getCloneObj(mergeNode);
        this.showProcessContent();
      }else{
        this.node = this.defaultNode();
        let mergeNode = Object.assign(this.node,row);
        this.node = utils.getCloneObj(mergeNode);
        this.showNodeContent();
      }
      this.dialogVisible = true
    },
    showNodeContent(){
      this.$nextTick(() => {
        if (this.$refs.nodeNormal) {
          this.$refs.nodeNormal.showPro(this.node);
        }
        if(this.$refs.nodeApproval){
          this.$refs.nodeApproval.showPro(this.node);
        }
        if(this.$refs.processEvent){
          this.$refs.processEvent.showPro(this.node);
        }
        if(this.$refs.authConfig){
          this.$refs.authConfig.showPro(this.node);
        }
        if(this.$refs.formConfig){
          this.$refs.formConfig.showPro(this.node);
        }
        if(this.$refs.variableConfig){
          this.$refs.variableConfig.showPro(this.node);
        }
      });
    },
    showProcessContent(){
      this.$nextTick(() => {
        if(this.$refs.processEvent){
          this.$refs.processEvent.showPro(this.process);
        }
        if(this.$refs.authConfig){
          this.$refs.authConfig.showPro(this.process);
        }
        if(this.$refs.variableConfig){
          this.$refs.variableConfig.showPro(this.process);
        }
      });
    },
    closeDialog(){
      this.node = {}
      this.process = {};
      this.dialogVisible = false
      this.loading = false
    },
    submit(){
      if(this.type === 'process'){
        this.$emit('success',this.process)
      }else{
        this.$emit('success',this.node)
      }
      this.closeDialog()
    }
  }
};
</script>
<style lang="scss" scoped>
.configBody{
  height: 400px;
  border: 1px solid lightgray;

}
.configProBody{
  height: 340px;
  overflow: auto;
  margin-left: 10px;

}
.btn-group{
  margin-top: 10px;
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
</style>